<template>
  <el-select
    v-model="value"
    :disabled="disabled"
    :size="size"
    :multiple="multiple"
    :filterable="filterable"
    :clearable="clearable"
    style="width: 100%;"
    @change="handleChange"
    :placeholder="plzSelect?$t('message.plzSelect'):(labelAll?labelAll:$t('common.text.all'))"
    :popper-class="{'edu-dict-select': showBar}"
  >
    <el-row class="select-tool-bar" v-if="showBar">
      <el-col :span="12">
        <el-button size="mini" @click="checkAll" style="width: 100%;">{{$t('common.btn.checkAll')}}</el-button>
      </el-col>
      <el-col :span="12">
        <el-button size="mini" @click="cancelAll" style="width: 100%;">{{$t('common.btn.cancelAll')}}</el-button>
      </el-col>
    </el-row>
    <el-option :label="$t('common.text.all')" value="" v-if="showAll"/>
    <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>

import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import BPIs from "common/src/api/welcomeService/schoolRelation"
/**
 * 专业字典下拉框组件
 */
export default {
  name: "SchoolMajorSelect",
  props: {
    value: {
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: true
    },
    plzSelect: { // 用于展示placeholder的默认值 而不是 “全部”
      type: Boolean,
      default: false
    },
    labelAll: {
      type: String
    },
    showAll: {
      type: Boolean,
      default: false
    },
    schoolId:{
      default: ''
    },
    clearOnFaculty:{
      default: true // 当学院有改变时要不要清空数据
    },
    showToolBar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataList:[],
      schoolMajor:[]
    }
  },
  watch:{
    schoolId: {
      handler: function(newVal, oldVal) {
        if(UTILS.isNotEmpty(newVal)){
          if(!_.isEqual(newVal, oldVal)) {
            // 学院改变后清空结果
            if(this.clearOnFaculty) {
              this.handleChange(this.multiple ? [] : null);
            }
            this.query(newVal); 
          }
        }else{
          this.dataList = [];
          this.handleChange(this.multiple ? [] : null);
        }
      }
    },
    value(val, oldVal) {
    }
  },
  computed:{
    showBar(){
      return this.multiple && this.showToolBar;
    }
  },
  mounted() {
  },
  created() {
    if (this.multiple && !Array.isArray(this.value)) {
      this.$emit("input", []);
    }
    if (!this.multiple && Array.isArray(this.value)) {
      this.$emit("input", "");
    }
    if(UTILS.isNotEmpty(this.schoolId)){
      this.query(this.schoolId);
    }
  },
  methods: {
    handleChange(val){
      this.$emit("input", val);
      //if(!_.isEqual(this.value, val)) {
        this.$emit('change', val);
      //}
    },
    query(val){
        this.dataList = [];
        this.schoolMajor=[];
        BPIs.findSchoolById(val).then(res =>{
        if(res.code ==200 && res.data.tutorSchoolProfessionList.length>0 ){
          for(const item of res.data.tutorSchoolProfessionList){
            this.dataList.push({
               value: item.professionCode,
               label: item.professionCodeI18n
            });
            this.schoolMajor.push(item.professionCode);
          }
          this.$emit('load-done', this.schoolMajor);
        }
      });
    },
    checkAll(){
      const val = [];
      _.forEach(this.dataList, (d)=>{
        val.push(d.value);
      });
      this.handleChange(val);
    },
    cancelAll(){
      this.handleChange([]);
    }
  }
};

</script>

<style scoped>
</style>
